<script setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";
import $fetch from "../../../utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
const route = useRoute();
let form = reactive({
    name: null,
    password: null,
    confirmPassword: null,
});

function onSubmit() {
    if (!form.password && !form.confirmPassword) {
        ElMessage({
            type: "info",
            message: "请完善输入信息！",
        });
        return;
    }
    //  else if (form.password !== form.confirmPassword) {
    //     ElMessage({
    //         type: "info",
    //         message: "确认两次密码一致！",
    //     });
    //     return;
    // }
    ElMessageBox({
        title: "提示",
        message: "是否确定修改密码？",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
            if (action === "confirm") {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = "等待...";
                $fetch(
                    "/user/updatePassword",
                    {
                        sourcePassword: form.password,
                        newPassword: form.confirmPassword,
                    },
                    "post",
                    localStorage.getItem("token")
                ).then((res) => {
                    done();
                    setTimeout(() => {
                        instance.confirmButtonLoading = false;
                    }, 300);
                });
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "修改成功！",
            });
        })
        .catch((err) => {
            console.log(123, err);
            ElMessage({
                type: "info",
                message: "修改取消！",
            });
        });
}
</script>
<template>
    <div id="changePassword">
        <el-header>{{ route.meta.title }}</el-header>
        <el-form :model="form" label-width="120px">
            <el-form-item label="原密码">
                <el-col :span="8">
                    <el-input
                        v-model="form.password"
                        type="password"
                        placeholder="请输入..."
                        show-password
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="新密码">
                <el-col :span="8">
                    <el-input
                        v-model="form.confirmPassword"
                        type="password"
                        placeholder="请输入..."
                        show-password
                    />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="less">
#changePassword {
    height: 100%;
    width: 100%;
}
.el-overlay,
.el-overlay-dialog {
    pointer-events: auto;
}
</style>
